<script setup>
import { ref } from 'vue';

let imgUrl = ref("https://www.cmse.gov.cn/xwzx/202511/W020251101161154105825.jpg")

// 定义一个变量存储的是一个字符串类型的外部样式类名称
let style = ref("active")
</script>

<template>
    <!-- 用于动态绑定原始的属性 -->
    <!-- 修改元素自带的属性，但是不适用于class 和 style -->
    <img v-bind:src="imgUrl" alt="">

    <!-- active 不是 JavaScript 变量，无法识别 -->
    <!-- <div v-bind:class="active">Hello, World!</div> -->
    <div v-bind:class="style">Hello, World!</div>
</template>

<style lang="css" scoped>
.active {
    background-color: red;
}
</style>